"use client";
import { GlobalNoticeRep, updateGlobalNoticeApi, updateUserNoticeApi } from "@/api/home";
import Box from "@/components/Box";
import Empty from "@/components/Empty";
import { timeFormat } from "@/utils/methods";
import { Badge, Collapse } from "antd-mobile";
import { useLocale } from "next-intl";
import { useState } from "react";
import style from "./style.module.scss";
interface Props {
    data: GlobalNoticeRep[];
    type: "system" | "user";
}
const SystemMessage = (props: Props) => {
    const { data, type } = props;
    const locale = useLocale();
    const [noticesData, setNoticesData] = useState<GlobalNoticeRep[]>(data);

    const collapseChange = (active: string | null) => {
        if (!active) return;
        const isRead = noticesData.find((item) => item.id === +active)?.is_read;
        if (isRead) return;
        const newNotices = noticesData.map((item) => {
            if (item.id === +active && !item.is_read) {
                return { ...item, is_read: true };
            } else {
                return item;
            }
        });
        if (type === "system") {
            updateGlobalNoticeApi(+active).then((r) => {});
        } else {
            updateUserNoticeApi(+active);
        }
        setNoticesData(newNotices);
    };
    if (!noticesData.length) return <Empty />;
    return (
        <div className={style.messageCollapse}>
            <Collapse accordion onChange={collapseChange}>
                {noticesData.map((notice, index) => (
                    <Collapse.Panel
                        key={`${notice.id}`}
                        title={
                            <section>
                                <header className={"flex items-center"}>
                                    <h6 className={""}>{notice.content?.title}</h6>
                                    <Badge
                                        className={`ml-[0.1rem] h-[0.06rem] w-[0.06rem]`}
                                        style={{ "--color": "#f0dc00" }}
                                        content={!notice.is_read ? Badge.dot : ""}
                                    ></Badge>
                                </header>
                                <p className={"text-[12px] text-[#64676d]"}>
                                    {notice.send_time
                                        ? timeFormat(notice.send_time!, locale)
                                        : timeFormat(notice.send_user_time!, locale)}
                                </p>
                            </section>
                        }
                    >
                        <div>
                            <p className={"text-[16px] text-[#c1c6d2]"}>{notice.content?.text}</p>

                            <img src={notice.content?.image} alt="" />
                            <div
                                className={`-mb-[12px] mt-[0.0694rem] flex h-[0.2778rem] items-center justify-center border-t-[0.006rem] border-[#454545] text-[#64676d]`}
                            >
                                <Box action={notice.action_type} actionData={notice.action_params}>
                                    <p className={"text-[0.1111rem]"}>{notice.content?.word}</p>
                                </Box>
                                <span
                                    className={"iconfont icon-xiangyou2 ml-[5px] text-[0.08rem]"}
                                ></span>
                            </div>
                        </div>
                    </Collapse.Panel>
                ))}
            </Collapse>
        </div>
    );
};

export default SystemMessage;